<template>
	<view class="container">
		<view class="content">
			<view class="toolbar">
				<button :class="{ 'active': isEditActive }" @click="toggleActive('edit')">编辑</button>
				<button :class="{ 'active': !isEditActive }" @click="toggleActive('preview')">预览</button>
			</view>
			<!-- 动态渲染文本输入和图片 -->
			<view v-if="isEditActive" v-for="(item, index) in items" :key="index" class="item">
				<view class="function">
					<!-- 索引为0的时候不显示“上”按钮 -->
					<image v-if="index > 0" src="/static/上.png" mode="aspectFill" @click="moveItemUp(index)" />
					<!-- 索引不等于items的长度减一的时候显示“下”按钮 -->
					<image v-if="index < items.length - 1" src="/static/下.png" mode="aspectFill"
						@click="moveItemDown(index)" />
					<image src="/static/删除.png" mode="aspectFill" @click="removeItem(index)" />
				</view>
				<textarea v-if="item.type === 'text'" placeholder-class="phc" style="min-height:150rpx"
					v-model="item.value" maxlength="9999" auto-height class="textarea"></textarea>
				<image v-if="item.type === 'image' &&item.src.includes('blob:http://localhost') " :src="item.src" mode="widthFix"
					class="uploaded-image" />
								<image v-if="item.type === 'image'&&item.src.includes('state/images/')" :src="url()+item.src" mode="widthFix" class="uploaded-image" />
				<view class="add-buttons">
					<view class="add-text" @click="addTextInput(index + 1)">
						<image src="/static/加.png" mode="aspectFill" />
						<text>添加文本</text>
					</view>
					<view class="add-image" @click="addImage(index + 1)">
						<image src="/static/图片.png" mode="aspectFill" />
						<text>添加图片</text>
					</view>
				</view>
			</view>
			<!-- 预览 -->
			<view v-if="!isEditActive" v-for="(item, index) in items" :key="index" class="item">
				<text v-if="item.type === 'text'" class="text">{{ item.value }}</text>
				<image v-if="item.type === 'image' &&item.src.includes('blob:http://localhost') " :src="item.src" mode="widthFix"
					class="uploaded-image" />
								<image v-if="item.type === 'image'&&item.src.includes('state/images/')" :src="url()+item.src" mode="widthFix" class="uploaded-image" />
			</view>
		</view>
		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<view class="action" @click="NoConserve">不保存,返回</view>
			<view class="action" @click="Conserve">保存</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		url
	} from '@/request/api.js';

	// 存储文本和图片的数组
	// const items = ref([{
	// 	type: 'text',
	// 	value: '2222'
	// }, {
	// 	type: 'image',
	// 	src: '/static/logo.png'
	// }]);

	// 存储文本和图片的数组
	const items = ref([{
		type: 'text',
		value: ''
	}]);
	const isEditActive = ref(true);

	onLoad(async (e) => {
		console.log("e", e.data);
		try {
			if (e.data !== '') {
				let combinedJsonString = '[' + e.data.replace(/}{/g, '},{') + ']';
				let retrievedArray = JSON.parse(combinedJsonString); // 解析合并后的 JSON 数组字符串

				items.value = retrievedArray
				console.log(items.value)
			} else {
				console.log("e.data为:" + e.data + ":");
			}
		} catch (error) {
			console.error("请求失败:", error);
		}
	});

	function Conserve() {
		// 使用 value 属性来获取 items 的实际值
		const itemsValue = items.value;

		let typeCounts = {
			text: 0,
			image: 0,
			isnull: '',
			myField: ''

		};

		if (Array.isArray(itemsValue)) {
			itemsValue.forEach(item => {
				// 根据 item 的 type 属性增加相应的计数
				if (item.type === 'text') {
					typeCounts.text++;
					typeCounts.isnull += item.value.replace(/\s+/g, '');
				} else if (item.type === 'image') {
					typeCounts.image++;
				}
				typeCounts.myField += JSON.stringify(item);
			});
			// 打印出字段的内容
			console.log(typeCounts);
			if (typeCounts.image === 0 && typeCounts.isnull === '') {
				console.log("输入框为空");
			} else {
				uni.setStorageSync('typeCounts', typeCounts);
				wx.navigateBack({ //delta: 1 返回上一页
					delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
				});
			}
		} else {
			console.log('Items is not an array');
		}
	}

	function NoConserve() { //不保存返回上一页
		wx.navigateBack({ //delta: 1 返回上一页
			delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
		});
	}
	// 编辑
	function handleEdit() {
		console.log('编辑功能');
		console.log(items.value);
	}

	// 预览
	function handlePreview() {
		console.log('预览功能');
	}

	// 添加文本输入框
	function addTextInput(index) {
		items.value.splice(index, 0, {
			type: 'text',
			value: ''
		});
	}

	// 添加图片
	async function addImage(index) {
		const result = await uni.chooseImage({
			count: 1, // 默认9，设置为1表示只能选择一张图片
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		});
		if (result.tempFilePaths.length > 0) {
			items.value.splice(index, 0, {
				type: 'image',
				src: result.tempFilePaths[0]
			});
			console.log(result.tempFilePaths[0])
		}
	}

	// 删除项
	function removeItem(index) {
		if (items.value.length > 1) {
			items.value.splice(index, 1);
		} else {
			uni.showToast({
				title: '至少需要一个内容框',
				icon: 'none',
				duration: 2000
			});
		}
	}

	// 移动项上移
	function moveItemUp(index) {
		if (index > 0) {
			const itemToMove = items.value[index];
			items.value.splice(index, 1);
			items.value.splice(index - 1, 0, itemToMove);
		}
	}

	// 移动项下移
	function moveItemDown(index) {
		if (index < items.value.length - 1) {
			const itemToMove = items.value[index];
			items.value.splice(index, 1);
			items.value.splice(index + 1, 0, itemToMove);
		}
	}

	// 切换编辑和预览按钮的激活状态
	function toggleActive(mode) {
		if (mode === 'preview') {
			isEditActive.value = false;
		} else {
			isEditActive.value = true;
		}
	}
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f9f9f9;
	}

	.toolbar {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.toolbar button {
		margin: 0 10px;
		/* 调整按钮之间的间距 */
		border: none;
		border-radius: 999px;
		/* 增加圆角，使其更圆润 */
		background-color: #409eff;
		color: #ffffff;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s;
		outline: none;
		/* 去除焦点时的轮廓 */
	}

	.toolbar button:hover {
		background-color: #66b1ff;
	}

	/* 激活状态的按钮样式 */
	.active {
		background-color: #409eff;
		/* 蓝色背景 */
		color: #ffffff;
	}

	/* 非激活状态的按钮样式 */
	button:not(.active) {
		background-color: #f5f5f5;
		/* 灰色背景 */
		color: #333;
	}

	/* 按钮悬停效果 */
	.toolbar button:hover {
		background-color: #66b1ff;
	}

	.content {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.item {
		margin-bottom: 30px;
		/* 每个项之间的间距 */
		position: relative;
	}

	.function {
		display: flex;
		align-items: center;
		gap: 10px;
		background-color: #eaeaea;
		padding: 5px;
		border-radius: 19px;
		width: fit-content;
		/* 宽度适应内容 */
		position: absolute;
		/* 绝对定位 */
		top: -20px;
		left: auto;
		/* 不需要固定left值 */
		right: 0;
		/* 靠父容器的右边 */
		z-index: 50;
		justify-content: flex-end;
		/* 内部元素右对齐 */
		box-shadow: 0 1px 8px rgb(0 0 0 / 42%);
	}

	.function image {
		width: 20px;
		/* 设置图片宽度 */
		height: 20px;
		/* 设置图片高度 */
	}

	.textarea {
		width: 93%;
		padding: 10px;
		border: 1px dashed #333333;
		/* 虚线边框 */
		border-radius: 4px;
		background-color: #fff;
		box-shadow: none;
		/* 去除默认的阴影 */
		min-height: 150rpx;
	}

	.text {
		width: 93%;
		padding: 10px;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: none;
		/* 去除默认的阴影 */
		min-height: 150rpx;
	}

	.uploaded-image {
		width: 100%;
		/* 设置图片宽度 */
		border: 1px dashed #333333;
	}

	.image {
		width: 100%;
		/* 设置图片宽度 */
	}

	.add-buttons {
		display: flex;
		justify-content: center;
		/* 使按钮居中 */
		gap: 20px;
		/* 增加间距 */
		margin-top: 20px;
		/* 增加上边距 */
	}

	.add-text,
	.add-image {
		display: flex;
		align-items: center;
		gap: 5px;
		/* 图片与文本之间的间距 */
		cursor: pointer;
	}

	.add-text image,
	.add-image image {
		width: 20px;
		/* 设置图片宽度 */
		height: 20px;
		/* 设置图片高度 */
	}

	.add-text text,
	.add-image text {
		color: #40434e;
		font-size: 16px;
	}

	.bottom-actions {
		position: fixed;
		/* 固定定位到屏幕底部 */
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* padding: 10px 0; */
		background-color: #fff;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		/* 确保在最上层 */
	}

	.action {
		font-size: 16px;
		cursor: pointer;
		flex-grow: 1;
		text-align: center;
		padding: 10px 0;
		/* 添加内边距 */
		color: #fff;
		/* 字体颜色为白色 */
		/* border-radius: 5px; 添加圆角 */
	}

	/* 不保存,返回按钮的背景颜色为红色 */
	.action:first-child {
		background-color: #f56c6c;
		/* 红色背景 */
	}

	/* 保存按钮的背景颜色为蓝色 */
	.action:last-child {
		background-color: #409eff;
		/* 蓝色背景 */
	}
</style>